<template>
  <div id='wrap'>
    <h1>组合式API:生命周期钩子</h1>
    <div>
    <button @click="num++">数字累加:{{ num }}</button>
    </div>
    <div>
        <!-- <scu16 v-if="flg"></scu16> -->
        <button @click="edit">触发组件的卸载</button>
    </div>
    <!-- <ul>
        <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul> -->
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu25',
}
</script>

<script lang='ts' setup>
import { ref,
    onBeforeMount,
    onBeforeUpdate,
    // onBeforeUnmount,
    onMounted,
    onUpdated,
    // onUnmounted 
    onRenderTracked,
    onRenderTriggered
} from 'vue'
import scu16 from "./component/scu16.vue";
const num=ref(0)
const flg=ref(true)
const edit=()=>{
    flg.value=false
}
// interface IUser{
//     id:number
//     name:string
//     username:string
//     email:string
//     address:{
//         street:string
//         suite:string
//         city:string
//         zipcode:string
//         geo:{
//             lat:string
//             lng:string
//         }
//     }
//     phone:string
//     website:string
//     company:{
//         name:string
//         catchPhrase:string
//         bs:string
//     }
// }
// let timer:ReturnType<typeof setInterval>
// const users=ref<IUser[]>([])
// onMounted(async()=>{
//     const response=await fetch('https://jsonplaceholder.typicode.com/users')
//     users.value=await response.json()
// })
onUpdated(()=>{
    console.log('onBeforeUpdate:在组件因为响应式状态变更而更新其DOM树之后调用');
})
onMounted(()=>{
    console.log('onMounted:在组件挂载完成后执行');
    // timer=setInterval(()=>{
    //     console.log('定时器无限运行中');
    // },1000)
})
// onUnmounted(()=>{
//     console.log('onUnmounted:在组件实例被卸载之后调用');
// })
onBeforeMount(()=>{
    console.log('onBeforeMount:在组件挂载之前调用');
})
onBeforeUpdate(()=>{
    console.log('onBeforeUpdate:在组件因为响应式状态变更而更新其DOM树之前调用');
})
// onBeforeUnmount(()=>{
//     console.log('onBeforeUnmount:在组件实例被卸载之前调用');
//     clearInterval(timer)
// })
onRenderTracked(()=>{
    console.log('onRenderTracked:依赖被追踪时调用，用于调试依赖收集情况');
})
onRenderTriggered(()=>{
    console.log('onRenderTriggered:响应式依赖触发组件重新渲染时调用');
})
</script>

<style scoped lang='scss'>

</style>